<template>
  <div>
    <div class="input">
     <el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="search">
  </el-input>
    </div>
  <el-button class="add" @click="dialogFormVisible=true">添加商品</el-button>
  <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="商品链接" :label-width="formLabelWidth">
      <el-input v-model="form.url" ></el-input>
    </el-form-item>
    <el-form-item label="商品图片链接" :label-width="formLabelWidth">
      <el-input v-model="form.url_img" ></el-input>
    </el-form-item>
    <el-form-item label="商品名称" :label-width="formLabelWidth">
      <el-input v-model="form.title" ></el-input>
    </el-form-item>
    <el-form-item label="商品价格" :label-width="formLabelWidth">
      <el-input v-model="form.price" ></el-input>
    </el-form-item>
    <el-form-item label="商家名称" :label-width="formLabelWidth">
      <el-input v-model="form.store" ></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="add_goods">确 定</el-button>
  </div>
</el-dialog>
    <div class="goodsBox">
      <div v-for="item in obj" :key="item.id">
        <a
          target="view_window"
          :href="item.url"
          class="goods"
          v-if="item.show == true"
        >
          <img :src="item.url_img" alt="" />
          <div class="title">{{ item.title }}</div>
          <div class="price">￥ {{ item.price }}</div>
          <div class="store">{{ item.store }}</div>
          <div class="num">月售{{ item.num }}</div>
        </a>
      </div>
    </div>
  </div>
</template>
<style scoped>
.add{
  position: absolute;
  top:20px;
  right: 45px;
  background: #2cb5ac;
  color: #fff;
}
.input {
  position: absolute;
  top: 20px;
  left: 40px;
}
.goodsBox {
  width: 100%;

  margin-top: 40px;
}
.goods {
  display: block;
  height: 300px;
  width: 200px;
  border-radius: 5px;
  border: 1px #f2f2f2 solid;
  padding: 20px 18px 0 18px;
  position: relative;
  box-shadow: 30px #f2f2f2;
  float: left;
  margin: 26px 26px;
}
.goods:hover {
  border: 1px #d8d8d8 solid;
}
.goods img {
  display: block;
  height: 160px;
  width: 160px;
}
.goods .title {
  color: #9b9b9b;
  font-size: 14px;
  margin: 10px 0 0 5px;
}
.goods .price {
  color: #fd3f31;
  font-size: 18px;
  margin-top: 10px;
}
.goods .store {
  font-size: 12px;
  color: #9b9b9b;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px #f2f2f2 solid;
}
.goods .num {
  color: #9b9b9b;
  position: absolute;
  font-size: 12px;
  bottom: 5px;
  right: 15px;
}
</style>
<script>
export default {
  data() {
    return {
      goods_id:10,
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},
      search: "",
      obj: [
        {
          id: 1,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i4/2674572959/O1CN0146CxLc1XjGYbIYgPK_!!2674572959.jpg_468x468q75.jpg_.webp",
          title: "黑色一次性医用外科口罩",
          price: 9.8,
          store: "中瑞家具批零点",
          num: 98,
          show: true,
        },
        {
          id: 2,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i3/4206483627/O1CN01QvD9V51cfD7wBC8ET_!!4206483627.jpg_468x468q75.jpg_.webp",
          title: "KN95防护口罩",
          price: 5.9,
          store: "孩旭坊帽业",
          num: 212,
          show: true,
        },
        {
          id: 3,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i1/2208055236657/O1CN016DMZRG1z2xGA9dQPg_!!0-item_pic.jpg_468x468q75.jpg_.webp",
          title: "75%医用消毒酒精",
          price: 19.0,
          store: "宝康大药房",
          num: 123,
          show: true,
        },
        {
          id: 4,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i2/2200573906053/O1CN01yqx7WD1uaK2N4LzFs_!!0-item_pic.jpg_468x468q75.jpg_.webp",
          title: "医用免洗洗手液速干",
          price: 31.5,
          store: "德阳医疗器械专营店",
          num: 654,
          show: true,
        },
        {
          id: 5,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i3/2206920550768/O1CN01dlsPNx1HXmpU1ocQU_!!0-item_pic.jpg_468x468q75.jpg_.webp",
          title: "电子红外体温计",
          price: 68.0,
          store: "洪兴大药房",
          num: 321,
          show: true,
        },
        {
          id: 6,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i4/2200729914498/O1CN01eklO711j688tfbjdg_!!2200729914498.jpg_468x468q75.jpg_.webp",
          title: "一次性隔离衣",
          price: 19.8,
          store: "云起工装",
          num: 544,
          show: true,
        },
        {
          id: 7,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i2/2348620654/O1CN01AM1EXs1GhZftEKaWP_!!0-item_pic.jpg_468x468q75.jpg_.webp",
          title: "一次性医用科口罩",
          price: 24.8,
          store: "洪兴大药房",
          num: 98,
          show: true,
        },
        {
          id: 8,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i1/2200573906053/O1CN012SbWT01uaK2Dh0ecn_!!2200573906053.jpg_468x468q75.jpg_.webp",
          title: "家用呼吸机",
          price: 3960.0,
          store: "德阳医疗器械专营店",
          num: 2,
          show: true,
        },
        {
          id: 9,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i3/4290997764/O1CN01YPkf1w27DxhUEcyPg_!!0-item_pic.jpg_468x468q75.jpg_.webp",
          title: "一次性医用手套",
          price: 9.8,
          store: "英科医疗旗舰店",
          num: 98,
          show: true,
        },
        {
          id: 10,
          url:
            "https://item.taobao.com/item.htm?id=590244825841&ali_trackid=2:mm_130402922_1108650181_110605000034:1609836046_268_1342826077&union_lens=lensId:OPT@1609836044@2106c9f0_092f_176d1b49f3d_2cab@01;recoveryid:201_11.1.81.73_3065696_1609817640086;prepvid:201_11.11.100.114_5099675_1609836043666&spm=a2e2e.10720394%2Fbrand3.90200100.1&bxsign=tbkE6XBtG/I1L99VkxFS5stXElnXIsEQB6ZHD/dnf/ZuDoAz8A3G9QeKj/PspnuYoEI7bg8nkY/Wr0ulpBeSae/pvoAnjwU4I2XDnv2Z2yKBVk=",
          url_img:
            "https://img.alicdn.com/bao/uploaded/i1/3251718273/O1CN01sXRWz62Az5Iq03JWp_!!0-item_pic.jpg_468x468q75.jpg_.webp",
          title: "全封闭医用隔离护目镜",
          price: 57.0,
          store: "瑞腾旗舰店",
          num: 98,
          show: true,
        },
      ],
    };
  },
//   watch: {
//       search:{
//           handle:function(){
//               this.search_goods(this.search);
//           },
          
//       }
//   },
  created () {
      this.$watch("search", function (newValue, oldValue) {
          this.search_goods(this.search)
      })
  },
  methods: {
    search_goods(val) {
      for(var j=0;j<this.obj.length;j++){
          this.obj[j].show = true;
      }
      for (var i = 0; i < this.obj.length; i++) {
          if(!this.obj[i].title.includes(val)){
              this.obj[i].show = false;
          }
      }
    },
    add_goods(){
      this.form.id = ++this.goods_id;
      this.form.num = 0;
      this.form.show = true;
      this.obj.push(this.form);
      this.dialogFormVisible = false;
      this.search_goods('');
      this.form = {}
    }
  },
};
</script>